<template>
  <view class="bgf px-15 pt-15 pb-11 mb-10">
    <view class="imgBox">
      <TImage :src="item.coverUrl" width="100%" height="100%" mode="aspectFill" />
      <view class="container" @click="goPhotosDetails">
        <view class="statisticsBox">
          <view>
            <text class="ali-icon fz-14">&#xe8ba;</text>
            <text class="fz-12 pl-4">{{ item.photoAlbumNum || 0 }}</text>
          </view>
          <view class="ml-10">
            <text class="ali-icon fz-14">&#xe6cf;</text>
            <text class="fz-12 pl-4">{{ item.browseNum ? formatNumber(item.browseNum) : 0 }}</text>
          </view>
        </view>
      </view>
      <view v-if="item.sort" class="topTag fz-12 px-13 py-4">已置顶</view>
    </view>
    <view class="ov-1 fz-16 fw-7 my-10">
      {{ item.name }}
    </view>
    <view class="fz-12" style="color: #aaabab">
      {{ formatToDate(item.publishTime, 'YYYY年MM月DD日') }}
    </view>
    <view class="disFlx flexEnd">
      <view class="disFlxCC" style="width: 110rpx" @click.stop="toggleTop">
        <image :src="isTopIcon" style="width: 40rpx; height: 40rpx" />
        <view class="fz-12">{{ item.sort ? '取消置顶' : '置顶' }}</view>
      </view>
      <view class="disFlxCC" style="width: 110rpx" @click.stop="goAddPhotos">
        <image :src="settingIcon" style="width: 40rpx; height: 40rpx" />
        <view class="fz-12">设置</view>
      </view>
      <view class="disFlxCC" style="width: 110rpx; position: relative; " @click.stop="openShare">
        <!-- <button open-type="share" class="share-btn" /> -->
        <image :src="shareIcon" style="width: 40rpx; height: 40rpx" />
        <view class="fz-12">分享</view>
      </view>
      <view
        class="disFlxCC"
        style="width: 110rpx"
        @click.stop="openModel(PhotosModalType.ISDELETE)"
      >
        <image :src="deleteIcon" style="width: 40rpx; height: 40rpx" />
        <view class="fz-12">删除</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import { type PropType } from 'vue';
  import type { PhotoAlbumListResult } from '@/api/photoAlbum/types';
  import { PhotosModalType } from '@/enums/admin';
  import { svgToDataUrl } from '@/utils/index';
  import { isTopSVG, deleteSVG, shareSVG, settingSVG } from './photosIcon';
  import { navigateTo } from '@/router';
  import { formatToDate } from '@/utils/dateUtil';

  const isTopIcon = svgToDataUrl(isTopSVG);
  const deleteIcon = svgToDataUrl(deleteSVG);
  const shareIcon = svgToDataUrl(shareSVG);
  const settingIcon = svgToDataUrl(settingSVG);

  const props = defineProps({
    item: {
      type: Object as PropType<PhotoAlbumListResult>,
      required: true,
    },
  });
  const emit = defineEmits(['removeTop', 'openModel', 'openShare']);

  // 操作置顶
  const toggleTop = () => {
    if (props.item.sort) {
      // 取消置顶
      emit('removeTop');
    } else {
      // 打开弹窗
      openModel(PhotosModalType.ISTOP);
    }
  };

  const openModel = (type: PhotosModalType) => {
    emit('openModel', type, props.item.id);
  };

  const openShare = () => {
    emit('openShare', props.item);
  };

  const goPhotosDetails = () => {
    navigateTo({
      name: 'photosDetails',
      options: {
        id: props.item.id,
      },
    });
  };
  const goAddPhotos = () => {
    navigateTo({
      name: 'addPhotos',
      options: {
        id: props.item.id,
      },
    });
  };

  // 数字转整数 如 10000 转为1万
  const formatNumber = (num: number | string) => {
    num = Number(num);
    if (num == 0 || (num > 0 && num < 10000)) {
      return num + '';
    } else {
      return (num / 10000).toFixed(2) + '万';
    }
  };
</script>

<style lang="scss" scoped>
  .share-btn {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
  }
  .imgBox {
    width: 690rpx;
    height: 552rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;
    .container {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
    }
    .statisticsBox {
      position: absolute;
      z-index: 9;
      right: 0;
      bottom: 30rpx;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10rpx 0 0 10rpx;
      color: #e0e0e0;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      line-height: 52rpx;
    }
    .topTag {
      background-color: #d0f7ff;
      position: absolute;
      z-index: 9;
      color: #2878ff;
      top: 20rpx;
      right: 20rpx;
      border-radius: 10rpx;
    }
  }
</style>
